<template>

    <div class="w1200 outterbox">

        <main class="rightmain exambox m-t-10">
            <div class="examtitle">{{ examdetail.title }}</div>
            <div class="examsum">
                <span>考试总分:{{ examdetail.score_total }}</span>
                <span>合格分数:{{ examdetail.score }}</span>
                <span>考试限时:{{ examdetail.duration / 60 }}分钟</span>
            </div>
            <div class="examblock">
                <!-- 单选题 -->
                <h5 class="h5typetitle" v-show="singleList.length !== 0">
                    {{ `${chineseIndex.single}、单选题(共${singleList.length}题，${singleScore}分)` }}
                </h5>
                <ul class="questions">
                    <li :id="'single' + index" v-for="(item, index) in singleList " :key="index">
                        <div class="qtitle">
                            <span>{{ index + 1 }}.</span>
                            <span class="sorce">(单选题 {{ item.socre }}分)</span>
                            {{ item.title }}
                        </div>
                        <div class="options">
                            <el-radio-group v-model="item.originanswer" class="sigleoption"
                                v-for="(answer, index2) in item.content_map " :key="index2"
                                @change="uploadSingle(item.originanswer, item.section_id)">
                                <el-radio :value="choices[index2]" size="large">{{ choices[index2] }}.{{ answer
                                    }}</el-radio>
                            </el-radio-group>
                        </div>
                        <!-- <div class="explainbox">
                            <div class="choice">
                                <span>我的答案：A</span>
                                <span class="correct">正确答案：{{ item.answer }}</span>
                            </div>
                            <p class="explaintip">
                                知识点：<br>
                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                            </p>
                        </div> -->
                    </li>
                </ul>

                <!-- 多选题 -->
                <h5 class="h5typetitle" v-show="multipleList.length !== 0">
                    {{ `${chineseIndex.multiple}、多选题(共${multipleList.length}题，${multipleScore}分)` }}
                </h5>
                <ul class="questions">
                    <li :id="'multiple' + index" v-for="(item, index) in multipleList" :key="index">
                        <div class="qtitle">
                            <span>{{ index + 1 }}.</span>
                            <span class="sorce">(多选题 {{ item.socre }}分)</span>
                            {{ item.title }}
                        </div>
                        <div class="options">
                            <el-checkbox-group v-model="item.originanswer" class="sigleoption"
                                @change="uploadMultiple(item.originanswer, item.section_id)">
                                <el-checkbox :label="choices[index2] + '.' + answer" :value="choices[index2]"
                                    v-for="(answer, index2) in item.content_map" :key="index2" />
                                <!-- <el-checkbox label="B.资本主义萌芽正在迅速发展" value="B" /> -->
                            </el-checkbox-group>
                        </div>
                        <!-- <div class="explainbox">
                            <div class="choice">
                                <span>我的答案：AEF</span>
                                <span class="correct">正确答案：ABD</span>
                            </div>
                            <p class="explaintip">
                                知识点：<br>
                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                            </p>
                        </div> -->
                    </li>
                </ul>

                <!-- 判断题 -->
                <h5 class="h5typetitle" v-show="judgeList.length !== 0">
                    {{ `${chineseIndex.judge}、判断题(共${judgeList.length}题，${judgeScore}分)` }}
                </h5>
                <ul class="questions">
                    <li :id="'judge' + index" v-for="(item, index) in judgeList " :key="index">
                        <div class="qtitle">
                            <span>{{ index + 1 }}.</span>
                            <span class="sorce">(判断题 {{ item.socre }}分)</span>
                            {{ item.title }}
                        </div>
                        <div class="options">
                            <el-radio-group v-model="item.originanswer" class="sigleoption"
                                @change="uploadJudge(item.originanswer, item.section_id)">
                                <el-radio value="1" size="large">正确</el-radio>
                            </el-radio-group>
                            <el-radio-group v-model="item.originanswer" class="sigleoption"
                                @change="uploadJudge(item.originanswer, item.section_id)">
                                <el-radio value="0" size="large">错误</el-radio>
                            </el-radio-group>
                        </div>
                        <!-- <div class="explainbox">
                            <div class="choice">
                                <span>我的答案：A</span>
                                <span class="correct">正确答案：{{ item.answer }}</span>
                            </div>
                            <p class="explaintip">
                                知识点：<br>
                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                            </p>
                        </div> -->
                    </li>
                </ul>

                <!-- 填空题 -->
                <h5 class="h5typetitle" v-show="fillinList.length !== 0">
                    {{ `${chineseIndex.fillin}、填空题(共${fillinList.length}题，${fillinScore}分)` }}
                </h5>
                <ul class="questions">
                    <li :id="'fillin' + index" v-for="(item, index) in fillinList" :key="index">
                        <div class="qtitle">
                            <span>{{ index + 1 }}.</span>
                            <span class="sorce">(多选题 {{ item.socre }}分)</span>
                            {{ item.title }}
                        </div>
                        <div class="options" style="margin:20px 0px;">
                            <div class="inputbox" v-for="(num, index3) in item.fillnum" :key="index3">
                                <span class="indexbox">{{ index3 + 1 }}</span>
                                <el-input v-model="item.originanswer[index3]" style="width: 340px" placeholder="请输入"
                                    @change="uploadFillin(item.originanswer, item.section_id)" clearable />
                            </div>
                        </div>
                        <!-- <div class="explainbox">
                            <div class="choice">
                                <span>我的答案：AEF</span>
                                <span class="correct">正确答案：ABD</span>
                            </div>
                            <p class="explaintip">
                                知识点：<br>
                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                            </p>
                        </div> -->
                    </li>
                </ul>

                <!-- 简答题 -->
                <h5 class="h5typetitle" v-show="longfillList.length !== 0">
                    {{ `${chineseIndex.longfill}、简答题(共${longfillList.length}题，${longfillScore}分)` }}
                </h5>
                <ul class="questions">
                    <li :id="'longfill' + index" v-for="(item, index) in longfillList" :key="index">
                        <div class="qtitle">
                            <span>{{ index + 1 }}.</span>
                            <span class="sorce">(简答题 {{ item.socre }}分)</span>
                            {{ item.title }}
                        </div>
                        <!-- 简答题输入框 -->
                        <div class="options" style="margin:20px 0px;">
                            <el-input v-model="item.originanswer" style="width: 640px"
                                :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入"
                                @change="sendPicAnswer(index)" resize="none" />
                        </div>

                        <!-- 照片墙上传组件 -->
                        <el-upload style="margin-top: 10px;" :ref="'uploadRef' + index" name="imgFile"
                            :action="uploadUrl" :auto-upload="false" v-model:file-list="item.fileList" :limit="5"
                            list-type="picture-card" :on-preview="handlePictureCardPreview"
                            :before-upload="beforeAvatarUpload" :on-success="uploadSuccess"
                            :on-change="handleFileChange" :on-error="onError" :on-exceed="overSize">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>

                        <!-- 照片提交按钮 -->
                        <el-button style="margin-top: 10px;margin-bottom: 10px;" type="primary"
                            @click="submitUpload(index)">确定提交</el-button>

                        <!-- 答案解析 -->
                        <!-- <div class="explainbox">
                            <div class="choice">
                                <span>我的答案：AEF</span>
                                <span class="correct">正确答案：ABD</span>
                            </div>
                            <p class="explaintip">
                                知识点：<br>
                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                            </p>
                        </div> -->
                    </li>
                </ul>
            </div>
        </main>
        <aside class="leftside m-t-10">
            <div class="timebox p-20">
                <h4 class="h4title m-b-10">考试倒计时</h4>
                <div>
                    <countdown style="margin-left: -5px;" v-if="true" :set-time='examTime' :eid="eid"
                        @time-over="timeOver">
                    </countdown>
                    <span v-else>已完成</span>
                </div>
            </div>
            <div class="questionindex p-10">
                <h4 class="h4title m-10">答题卡</h4>
                <h5 class="m-10" v-show="singleList.length !== 0">{{ chineseIndex['single'] + '、单选题' + '（' + singleScore
                    + '分）' }}</h5>
                <ul class="clearfix">
                    <li :class="{ chosenColor: item.originanswer != '' }" v-for="(item, index) in singleList"
                        :key="index"><router-link :to="'#single' + index">{{ index + 1 }}</router-link></li>
                </ul>

                <!-- 多选题 -->
                <h5 class="m-10" v-show="multipleList.length !== 0">{{ chineseIndex['multiple'] + '、多选题' + '（' +
                    multipleScore + '分）' }}</h5>
                <ul class="clearfix">
                    <li :class="{ chosenColor: item.originanswer != '' }" v-for="(item, index) in multipleList"
                        :key="index"><router-link :to="'#multiple' + index">{{ index + 1 }}</router-link></li>
                </ul>

                <!-- 判断题 -->
                <h5 class="m-10" v-show="judgeList.length !== 0">{{ chineseIndex['judge'] + '、判断题' + '（' + judgeScore +
                    '分）' }}</h5>
                <ul class="clearfix">
                    <li :class="{ chosenColor: item.originanswer != '' }" v-for="(item, index) in judgeList"
                        :key="index"><router-link :to="'#judge' + index">{{ index + 1 }}</router-link></li>
                </ul>

                <!-- 填空题 -->
                <h5 class="m-10" v-show="fillinList.length !== 0">{{ chineseIndex['fillin'] + '、填空题' + '（' + fillinScore
                    + '分）' }}</h5>
                <ul class="clearfix">
                    <li :class="{ chosenColor: item.originanswer != '' }" v-for="(item, index) in fillinList"
                        :key="index"><router-link :to="'#fillin' + index">{{ index + 1 }}</router-link></li>
                </ul>

                <!-- 简答题 -->
                <h5 class="m-10" v-show="longfillList.length !== 0">{{ chineseIndex['longfill'] + '、简答题' + '（' +
                    longfillScore + '分）' }}</h5>
                <ul class="clearfix">
                    <li :class="{ chosenColor: item.originanswer != '' }" v-for="(item, index) in longfillList"
                        :key="index"><router-link :to="'#longfill' + index">{{ index + 1 }}</router-link></li>
                </ul>
            </div>
        </aside>

        <el-dialog v-model="dialogVisible">
            <img class="previewimg" w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </div>

    <el-dialog :show-close="false" :close-on-click-modal="false" v-model="centerDialogVisible" title="温馨提示" width="500"
        center>
        <div class="contentbox">
            考试时间到，答卷已自动提交~
            <br>
            页面将在{{ countNum }}秒后跳转课程考试页
        </div>
        <template #footer>
            <div class="dialog-footer">
                <!-- <el-button @click="centerDialogVisible = false">Cancel</el-button> -->
                <el-button type="primary" @click="jumphome">
                    立即跳转
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup>
import { inject, onMounted, ref, watch } from 'vue'
import countdown from '@/components/index/countdown.vue';

// 加载user模块 以及底下变量
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
let { username, avatar, uid } = storeToRefs(user)


// 引入网络请求相关
import api from '@/request/api';
const axios = inject('axios')

// 考试时限
let examTime = ref(0)

// 选项符号
let choices = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'])

// 4类题目答案格式
// let radio1 = ref('A')
// let checkList1 = ref(['A','B'])
// let input = ref(['哈哈哈','呵呵呵'])
// let textarea = ref('')

// 4类题目的展示数组
let singleList = ref([])   // 单选
let multipleList = ref([]) // 多选
let fillinList = ref([])   // 填空
let longfillList = ref([]) // 简答
let judgeList = ref([])    // 判断

// 各类题目总分值
let singleScore = ref(0)   // 单选
let multipleScore = ref(0) // 多选
let fillinScore = ref(0)   // 填空
let longfillScore = ref(0) // 简答
let judgeScore = ref(0)    // 判断

let chineseIndex = ref({})

// 获取路由参数
// 初始化路由实例
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const { eid } = route.query

// 考卷详情
let examdetail = ref({})
// 考试结束提示框
let centerDialogVisible = ref(false)
// 倒计时
let countNum = ref(8)

onMounted(async () => {
    console.log('eid', eid);

    let timeSecond = await getExamdetail(eid)
    timeSecond = timeSecond > 0 ? timeSecond : 0
    console.log(timeSecond);

    timeSecond = 1000

    // 设置考试时限
    examTime.value = +new Date() + timeSecond * 1000 // 10s测试

    // 获取考题
    getExamQuestions(eid)

    examattendlist(eid)
})

// 查看答题历史
async function examattendlist(examid) {
    let params = {
        uid: uid.value,
        exam_id: examid
    }
    let res = await axios.post(api.examattendlist, params)
    console.log('examattendlist', res);
}

// 查看考卷详情 返回本场考试的考试时限（单位：秒）
async function getExamdetail(eid) {
    let res = await axios.post(api.examcoursedetail, { uid: uid.value, id: eid })
    console.log(res);
    if (res.code == 0) {
        examdetail.value = res.data
        let duration = res.data.duration   // 考试时限
        let endTimeStr = res.data.end_time
        let endTime = +new Date(endTimeStr)
        let curTime = +new Date()
        let overplus = (endTime - curTime) / 1000  // 答题剩余时间

        console.log(duration, endTimeStr, endTime, curTime, overplus);

        // 如果剩余时间比原考试时限大，则返回考试原本时限，否则返回小于时限的剩余时间
        return overplus > duration ? duration : overplus
    } else {
        return 0
    }
}

// 获取考题列表
async function getExamQuestions(eid) {

    // let res = await axios.post(api.examcourselist, { uid: uid.value }) // 标准题库
    // let res = await axios.post(api.examsectionlist, params)             // 标准题库题目列表
    // console.log(res);

    let res = await axios.post(api.exambindlist, { pid: eid, uid: uid.value })
    console.log(res);

    let single = []   // 单选
    let multiple = [] // 多选
    let fillin = []   // 填空
    let longfill = [] // 简答
    let judge = [] // 判断

    // 分值
    let singleSco = 0   // 单选
    let multipleSco = 0 // 多选
    let fillinSco = 0   // 填空
    let longfillSco = 0 // 简答
    let judgeSco = 0    // 判断

    // 匹配 _ 列出填空题对应数量的输入框
    var regex = /_{1,5}/g;

    if (res.code == 0) {
        // console.log('exammylist', res.data)
        res.data.forEach(item => {
            switch (item.ctype) {
                // 单选
                case 1:
                    singleSco += item.socre
                    item.originanswer = ''   // 输入源答案
                    single.push(item)
                    break;
                // 多选
                case 2:
                    multipleSco += item.socre
                    item.originanswer = []   // 输入源答案
                    multiple.push(item)
                    break;

                // 填空
                case 4:
                    fillinSco += item.socre
                    item.originanswer = []   // 输入源答案
                    item.fillnum = item.title.match(regex)
                    fillin.push(item)
                    break;
                // 判断
                case 5:
                    judgeSco += item.socre
                    item.originanswer = []   // 输入源答案
                    judge.push(item)
                    break;
                // 简答
                case 6:
                    longfillSco += item.socre
                    item.fileList = []       // 定义附带图片数组
                    item.originanswer = ''   // 输入源答案
                    longfill.push(item)
                    break;
                default:
                    break;
            }
        });

        // console.log(single, multiple, fillin, longfill);
        singleList.value = single
        multipleList.value = multiple
        fillinList.value = fillin
        longfillList.value = longfill
        judgeList.value = judge

        singleScore.value = singleSco   // 单选
        multipleScore.value = multipleSco // 多选
        fillinScore.value = fillinSco   // 填空
        longfillScore.value = longfillSco // 简答
        judgeScore.value = judgeSco    // 判断

        let temArr = [
            { label: 'single', score: singleSco },
            { label: 'multiple', score: multipleSco },
            { label: 'judge', score: judgeSco },
            { label: 'fillin', score: fillinSco },
            { label: 'longfill', score: longfillSco },
        ]
        let indexChinese = ['一', '二', '三', '四', '五']
        let index = 0
        temArr.forEach(item => {
            chineseIndex.value[item.label] = indexChinese[index]
            if (item.score > 0) {
                index++
            }
        });

        // 添加每一个简答题图片数组监测 用于处理删除图片时，更新该题答案
        // 
        longfillList.value.forEach(item => {
            // 监测父组件时限传值
            watch(() => item.fileList, (newval, oldval) => {

                let resetArr = []
                let img = ''
                let ReSend = true // 是否重新提交

                newval.forEach(item => {
                    // 上传但不提交 对象里没有response属性
                    if (!item.response) return ReSend = false

                    let url = item.response?.data?.url
                    if (url) {
                        resetArr.push(url)
                    }
                });

                // 如果是添加图片 因为还没有真正提交，所以不用重新提交答案 return即可
                if (!ReSend) return

                // 否则正常重新提交 包含简答题文字答案、图片答案
                if (resetArr.length != 0) {
                    img = resetArr.join(',')
                }
                uploadLongfill(item.originanswer, item.section_id, img)
            })
        });
    } else {
        showMessage('error', res.msg)
    }
}

// 提交单选
async function uploadSingle(answer, section_id) {
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        answer
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);

}

// 提交判断
async function uploadJudge(answer, section_id) {
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        answer
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);

}

// 提交多选
async function uploadMultiple(answer, section_id) {
    answer = answer.join('')
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        answer
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);

}

// 提交填空
async function uploadFillin(answer, section_id) {
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        answers: answer
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);

}

// 提交简答
async function uploadLongfill(answer, section_id, img) {
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        content: answer,
        img: img ? img : ''
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);
}

let dialogImageUrl = ref('')
let dialogVisible = ref(false)
// 当前操作的简单题数组索引 用于提交和删除图片时判断
let curLongIndex = ref(0)
// 后端文件上传地址
let uploadUrl = ref('https://api.gzzxue.com/shop115/uploadfile')

// 只能用静态方法预设定义提交图片组件 假设简答题题目不多于20道 必须单独设置，否则无法单独调用所有组件
let uploadRef0 = ref(null)
let uploadRef1 = ref(null)
let uploadRef2 = ref(null)
let uploadRef3 = ref(null)
let uploadRef4 = ref(null)
let uploadRef5 = ref(null)
let uploadRef6 = ref(null)
let uploadRef7 = ref(null)
let uploadRef8 = ref(null)
let uploadRef9 = ref(null)
let uploadRef10 = ref(null)
let uploadRef11 = ref(null)
let uploadRef12 = ref(null)
let uploadRef13 = ref(null)
let uploadRef14 = ref(null)
let uploadRef15 = ref(null)
let uploadRef16 = ref(null)
let uploadRef17 = ref(null)
let uploadRef18 = ref(null)
let uploadRef19 = ref(null)

// 连带文字答案 一同提交简答题图片答案
const sendPicAnswer = (index) => {
    let tempObj = longfillList.value[index]
    let resetArr = []
    let img = ''

    console.log('tempObj', tempObj);

    tempObj.fileList.forEach(item => {
        // let url = item?.response?.data?.url // 全路径
        let url = item?.response?.data?.img  // 相对路径

        if (url) {
            resetArr.push(url)
        }
    });

    if (resetArr.length != 0) {
        img = resetArr.join(',')
    }

    // 重新提交简单题答案 包含简答题文字答案、图片答案
    uploadLongfill(tempObj.originanswer, tempObj.section_id, img)
}

const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}

function overSize() {
    showMessage('warning', '超出上传限制啦')
}

// 上传成功 回调
function uploadSuccess(a, b, c, id) {
    // console.log('上传成功', a, b, c, id)
    showMessage('success', '成功')
    sendPicAnswer(curLongIndex.value)
}

function onError(err) {
    console.log(err)
    showMessage('error', err)
}

// 手动调用 提交到服务器
const submitUpload = (index) => {
    // 设置当前操作的简答题索引 用于图片上传成功后，提交图片答案
    curLongIndex.value = index
    // uploadRef.value[0].submit()

    let uploadref
    switch (index) {
        case 0:
            uploadref = uploadRef0
            break;
        case 1:
            uploadref = uploadRef1
            break;
        case 2:
            uploadref = uploadRef2
            break;
        case 3:
            uploadref = uploadRef3
            break;
        case 4:
            uploadref = uploadRef4
            break;
        case 5:
            uploadref = uploadRef5
            break;
        case 6:
            uploadref = uploadRef6
            break;
        case 7:
            uploadref = uploadRef7
            break;
        case 8:
            uploadref = uploadRef8
            break;
        case 9:
            uploadref = uploadRef9
            break;
        case 10:
            uploadref = uploadRef10
            break;
        case 11:
            uploadref = uploadRef11
            break;
        case 12:
            uploadref = uploadRef12
            break;
        case 13:
            uploadref = uploadRef13
            break;
        case 14:
            uploadref = uploadRef14
            break;
        case 15:
            uploadref = uploadRef15
            break;
        case 16:
            uploadref = uploadRef16
            break;
        case 17:
            uploadref = uploadRef17
            break;
        case 18:
            uploadref = uploadRef18
            break;
        case 19:
            uploadref = uploadRef19
            break;
        default:
            uploadref = uploadRef0
            break;
    }
    uploadref.value[0].submit()
}


// 文件上传前的检查
const beforeAvatarUpload = (file) => {
    const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
    const isLt2M = file.size / 1024 / 1024 < 5
    if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG PNG GIF BMP 格式!')
    }
    if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 5MB!')
    }

    return isJPG && isLt2M
}

// 文件选择后的处理 
const handleFileChange = (file, ownfileList) => {
    if (!file.raw) {
        return
    }
    const reader = new FileReader() // 关键的FileReader
    reader.onload = (e) => {
        // previewUrl.value = e.target.result
        // console.log(e.target.result);
    }
    reader.readAsDataURL(file.raw)
}

// 考试结束回调
function timeOver() {
    centerDialogVisible.value = true
    let timer = setInterval(() => {
        countNum.value--
        if (countNum.value == 0) {
            clearInterval(timer)
            jumphome()
        }
    }, 1000);
    console.log('考试结束');
}

function jumphome() {
    router.replace({
        name: 'Examindex',
        state: {
            lessonId: 121
        }
    })
}
// 信息提示
const showMessage = (msgtype, msgstr) => {
    ElMessage({
        showClose: true,
        message: msgstr,
        type: msgtype
    })
}

</script>

<style>
.previewimg {
    max-width: 100%;
}
</style>
<!-- 框架 -->
<style scoped>
.outterbox {
    display: flex;
    height: 100vh;
}

.leftside {
    box-sizing: border-box;
    width: 250px;
    /* background-color: #f9f9f9; */
    background-color: #f2f4f7;
    margin-left: 24px;
    flex-grow: 0;
    /* border: 1px solid #409eff; */
}

.rightmain {
    width: 1000px;
    background-color: #f2f4f7;
    flex-grow: 0;
    box-shadow: 10px -5px 10px #ccc;
}

.exambox {
    padding: 20px 10px 0;
    /* text-align: center; */
}
</style>

<!-- 倒计时 -->
<style>
.timebox {
    height: 60px;
    /* background-color: pink; */
}

.h4title {
    font-weight: 600;
}
</style>

<!-- 答题卡 -->
<style scoped>
.questionindex {
    height: 789px;
    /* background-color: skyblue; */
}

.questionindex ul {
    /* display: flex; */
    width: 100%;
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
}

.questionindex ul li {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #ccc;
    /* background-color: orange; */
    /* margin-right: 10px; */
    margin-bottom: 10px;
    margin-right: 5px;
    cursor: pointer;
}

.questionindex ul .chosenColor {
    background-color: #409eff;
    /* background-color: orange; */

}

.questionindex ul li a {
    display: block;
    border-radius: 8px;

}
</style>

<!-- 答题区域 -->
<style scoped>
.examtitle {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.examsum {
    height: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.examsum span {
    width: 140px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 600;
}

.examblock {
    height: 780px;
    margin-top: 30px;
    overflow: scroll;
    overflow-x: hidden;
}

.h5typetitle {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.questions li {
    display: block;
    margin-bottom: 50px;
}

.questions .qtitle {
    /* display: flex;
    align-items: flex-start; */
    line-height: 22px;
}

.qtitle span {
    display: inline-block;
    height: 22px;
    line-height: 22px;
}

.qtitle span:nth-child(2) {
    width: 90px;
    text-align: center;
}

.qtitle .sorce {
    color: #ccc;
    font-size: 13px;
}

.options {
    margin-top: 10px;
    margin-bottom: 10px;
}

.sigleoption {
    display: flex;
    flex-direction: column;
}
</style>

<!-- 解析框 -->
<style scoped>
.explainbox {
    width: 98%;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-left: 3px solid #ccc;
    border-right: 0;
    padding: 15px;
    padding-bottom: 30px;
    font-size: 13px;
}

.explainbox .choice {
    margin-bottom: 10px;
    font-weight: 700;
}

.explainbox .choice .correct {
    margin-left: 30px;
    color: #38ca9c;
}

.explainbox .explaintip {
    color: #888;
}
</style>

<!-- 填空题输入框 -->
<style scoped>
.inputbox {
    display: flex;
    align-items: center;
    margin: 10px 0px;
}

.inputbox .indexbox {
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #000;
    border-radius: 50%;
    margin-right: 6px;
}
</style>

<!-- 覆盖样式 -->
<style>
.sigleoption {
    align-items: flex-start !important;
}

.el-radio.el-radio--large {
    height: 30px;
}
</style>

<style scoped>
.contentbox {
    box-sizing: border-box;
    height: 100px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    padding-top: 20px;
}
</style>